<!-- 会话记录-->
<template>
  <ContainerSlot>
    <template slot="contentModule">
      <div class="chatWindow flex">
        <div class="chat-left chat">
          <div class="clientUser">
            <div class="searchUser flex">
              <el-select v-model="selectUserId" size="mini" filterable placeholder="请选择聊天用户">
                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId">
                </el-option>
              </el-select>
              <div style="width:10px"></div>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="selectUser">搜索</el-button>
            </div>
            <div class="clientUserInfo flex" :class="clientId == user.userId ? 'chooseUser' : ''"
              v-for="user, index in userList" :key="index" @click="chooseUser(user)">
              <div class="user flex">
                <div class="photo">
                  <img v-if="user.avatar" :src="user.avatar" alt="">
                  <i v-else style="color: #ffffff;" class="el-icon-user"></i>
                </div>
                <div>
                  <div>{{ user.nickName }}</div>
                  <template
                    v-if="user.oldMsg && user.oldMsg.length > 0 ? user.oldMsg[user.oldMsg.length - 1].messageType == 'text' : false">
                    <div style="color: #cccccc;font-size: 12px;padding-top: 12px;" class="userName">{{
                      user.oldMsg && user.oldMsg.length > 0 ? user.oldMsg[user.oldMsg.length - 1].content : '暂无信息' }}
                    </div>
                  </template>
                  <template v-else>
                    <div style="color: #cccccc;font-size: 12px;padding-top: 12px;" class="userName"
                      v-if="user.oldMsg && user.oldMsg.length > 0 ? user.oldMsg[user.oldMsg.length - 1].messageType == 'image' : false">
                      [图片]
                    </div>
                    <div style="color: #cccccc;font-size: 12px;padding-top: 12px;" class="userName"
                      v-if="user.oldMsg && user.oldMsg.length > 0 ? user.oldMsg[user.oldMsg.length - 1].messageType == 'video' : false">
                      [视频]
                    </div>
                  </template>
                </div>
              </div>
              <div class="newInfo">
                <div style="color: #cccccc;font-size: 12px;line-height: 20px;" class="time">{{
                  user.oldMsg && user.oldMsg.length > 0 ? convertTime(user.oldMsg[user.oldMsg.length - 1].sendTime) : ''
                }}</div>
                <div v-if="user.newMsg && user.newMsg.length > 0" class="badge">{{ user.newMsg.length }}</div>
                <div v-else-if="user.newMsg && user.newMsg.length > 100" class="badge">99+</div>
              </div>
            </div>
          </div>
          <div class="pagination"></div>
        </div>
        <div class="chat-right chat">
          <div class="chatInfo" id="chatInfo" v-loading="loadingChatList">
            <div v-if="clientId">
              <div v-if="!isLookOver" class="showHistory" @click="queryUserChatList()">查看历史记录</div>
              <div v-else class="noMore">这已经是我的底线喽！</div>

            </div>
            <div v-else class="noMore">请先现在联系人</div>
            <div v-for="info, index in newMessageList" :key="index">
              <div v-if="info.toId ? Number(info.toId) == Number(clientId) : false ||
                Number(info.fromId) == Number(clientId)">
                <div class="messageItem" v-if="!info.toId || (info.toId && info.fromId !== userId)">
                  <div class="message flex">
                    <div class="info">
                      <div class="photo">
                        <img v-if="clientAvatar && !info.toId" :src="clientAvatar" alt="">
                        <img v-else-if="info.toId && customerAvatar[info.fromId]" :src="customerAvatar[info.fromId]"
                          alt="">
                        <i v-else style="color: #ffffff;" class="el-icon-user"></i>
                      </div>
                    </div>
                    <div class="infoBox ql-snow">
                      <div class="userName flex" style="font-size: 12px;">
                        <span v-if="!info.toId" class="name" style="padding-right:20px;">{{ clientName }}</span>
                        <span v-else class="name" style="padding-right:20px; color: rgb(0, 119, 255);">{{
                          customerObj[info.fromId] }}</span>
                        <span class="time" style="color: #cecece;">{{ convertTime(info.sendTime) }}</span>
                      </div>
                      <div class="text ql-editor" v-html="info.message ? info.message.content : info.content"></div>
                    </div>
                  </div>
                </div>
                <div class="messageItem mainMessageItem" v-else>
                  <div class="message flex">
                    <div class="infoBox">
                      <div class="userName flex" style="font-size: 12px;">
                        <span class="time" style="color: #cecece;">{{ convertTime(info.sendTime) }}</span>
                        <span class="name" style="padding-left: 20px;color: rgb(0, 119, 255);">{{
                          customerObj[info.fromId] }}</span>
                      </div>
                      <div class="text" v-html="info.message ? info.message.content : info.content"></div>
                    </div>
                    <div class="info">
                      <div class="photo">
                        <img v-if="customerAvatar[info.fromId]" :src="customerAvatar[info.fromId]" alt="">
                        <i v-else style="color: #ffffff;" class="el-icon-user"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="input">
            <div class="modules flex">
              <!-- <div class="moduleItem" @click="handelVideo"><i class="el-icon-video-camera-solid"></i></div>
              <div class="moduleItem" @click="handelImage"><i class="el-icon-picture"></i></div> -->
              <div class="backBtn" style="font-size: 12px;cursor: pointer;" @click="jumpPageBottom(true)">底部</div>
              <div class="backBtn" style="font-size: 12px;cursor: pointer;padding: 0 10px;" @click="jumpPageTop">
                顶部</div>
              <div><el-date-picker size="mini" value-format='yyyy-MM-dd HH:mm:ss' :picker-options="pickerOptions"
                  v-model="searchTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker></div>
              <div style="padding: 0 10px;">
                <el-button size="mini" type="primary" icon="el-icon-search" @click="queryUserChatList">搜索</el-button>
              </div>
            </div>
            <!-- <div class="textarea">
              <el-input type="textarea" placeholder="请输入内容" v-model="textarea" resize='none'>
              </el-input>
            </div> -->
          </div>
          <!-- <div class="send" style="text-align: right;line-height: 40px;padding: 0 5px;">
            <el-button icon="el-icon-position" size="mini" type="primary" @click="sendMessage">发 送</el-button>
          </div> -->
        </div>
      </div>
      <!-- 图片上传组件辅助 -->
      <el-upload action="" ref="uploadFileImage" :auto-upload="false"
        :on-change="(file) => { handleUploadSuccess(file, 'image') }" accept=".png,.jpg,.jpeg" style="display: none"
        name="file" :show-file-list="false" />
      <!--视频上传组件辅助 -->
      <el-upload action="" ref="uploadFileVideo" :auto-upload="false"
        :on-change="(file) => { handleUploadSuccess(file, 'video') }" accept=".mp4, .avi, .mpg, .rmvb"
        style="display: none" name="file" :show-file-list="false" />
    </template>
    <el-backtop target=".chatInfo"></el-backtop>
  </ContainerSlot>
</template>

<script>
import Customer from '@/api/module/customer'
import ContainerSlot from '@/components/Container'
import SystemUserManagement from '@/api/module/system-user-management'
import CustomerServiceChat from '@/api/module/customer-service-chat'
import fileApi from '@/api/module/file' //文件上传api
import config from '@/api/config'
import { createSocket, sendWSPush, closeWs } from '../../../../utils/websocket'
export default {
  components: { ContainerSlot },
  data () {
    return {
      searchTime: [],
      selectUserId: '',
      page: '',
      loadingChatList: false,
      isGetHistoryListFlag: false,
      imgCol: '',
      imgColVideo: '',
      textarea: '',
      searchUser: '',
      newMessageList: [],
      textSendInfo: {},
      userId: Number(sessionStorage.getItem('userId')), //客服id
      userName: sessionStorage.getItem('userName'),//客服姓名
      clientId: '', //正在聊天的客户id
      clientName: '', //正在聊天的客户姓名
      clientAvatar: '',//头像
      isLookOver: false, // 是否查看过正在聊天客户的聊天记录
      sendTime: '', //查看历史记录的时间戳，
      clientTime: '',
      userList: [],
      timers: null,
      timers1: null,
      customerObj: {},
      customerAvatar: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted () {
    this.initData()
  },
  destroyed () {
    //组件销毁断开ws
    closeWs()
  },
  methods: {
    selectUser () {
      this.chooseUserInfo = this.userList.filter(user => { return user.userId == this.selectUserId })
      let newUserList = this.userList.filter(user => { return user.userId !== this.selectUserId })
      if (this.chooseUserInfo.length == 1) {
        newUserList.unshift(this.chooseUserInfo[0])
        this.chooseUser(this.chooseUserInfo[0])
        this.userList = newUserList
      } else {
        this.$message.success('没有查询到你要找的客户！')
      }
      this.selectUserId = ''
    },
    async initData () {
      await this.queryUserList()
      this.queryCustomerList()
      // this.userList.length > 0 && this.chooseUser(this.userList[0])
    },
    queryCustomerList () {
      Customer.queryByCondition({}).then(res => {
        if (res.data && res.data.length > 0) {
          res.data.forEach(data => {
            if (data.userId) {
              this.customerObj[data.userId] = data.nickName ? data.nickName + '(客服)' : '客服' + data.userId
              this.customerAvatar[data.userId] = data.user.avatar ? data.user.avatar : ''
            }
          })
        } else {
          this.customerObj = {}
          this.customerAvatar = {}
        }
        console.log(this.customerObj, 'queryCustomerList')
      })
    },
    chooseUser (user) {
      this.newMessageList = user.oldMsg && user.oldMsg.length > 0 ? user.oldMsg : [];
      if (this.newMessageList.length > 0) {
        this.sendTime = this.newMessageList[0].sendTime;
      } else {
        this.sendTime = Date.now();
      };
      this.sendTime ? this.sendTime : this.sendTime = Date.now();
      this.isLookOver = user.isLookOver ? user.isLookOver : false
      this.clientId = user.userId;
      this.clientName = user.nickName;
      this.clientAvatar = user.avatar;
      this.page = user.page ? user.page : 1; //没有page时默认第一页
      console.log(this.page)
      user.newMsg && (user.newMsg = []);
      this.sendReadList()
      this.jumpPageBottom(true)
    },
    //发送已读
    sendReadList () {
      let time = new Date();
      sendWSPush({
        code: 4,
        message: {
          endTime: this.timestampToTime(time.toLocaleString('en-US', { hour12: false }).split(" ")),
          fromId: this.clientId,
        },
        customer: 1
      })
    },
    //单个消息已读
    sendRead (msgId) {
      sendWSPush({
        code: 3,
        message: {
          id: msgId,
        },
        customer: 1
      })
    },
    //时间戳 timestamp
    convertTime (timestamp) {
      let time = new Date(timestamp);
      return this.timestampToTime(time.toLocaleString('en-US', { hour12: false }).split(" "))
    },
    //获取时间
    timestampToTime (times) {
      let time = times[1]
      let mdy = times[0]
      mdy = mdy.split('/')
      let month = parseInt(mdy[0]);
      let day = parseInt(mdy[1]);
      let year = parseInt(mdy[2])
      return year + '-' + month + '-' + day + ' ' + time
    },
    //用户列表
    queryUserList () {
      SystemUserManagement.queryByCondition({ userType: "custom_user" }).then(res => {
        if (res && res.code == 200) {
          this.userList = res.data;
          this.wsConnect();
        } else {
          this.userList = [];
        };
      })
    },
    //查看历史消息
    queryUserChatList () {
      this.loadingChatList = true;
      console.log(this.searchTime)
      CustomerServiceChat.queryByCondition({
        userId: this.clientId,
        endTime: this.searchTime && this.searchTime.length ? this.searchTime[1] : '',
        startTime: this.searchTime && this.searchTime.length ? this.searchTime[0] : ''
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.isGetHistoryListFlag = true;  //判断时候拿到过历史聊天记录
          let oldChat = res.data && res.data.length > 0 ? res.data : [];
          oldChat.sort((data1, data2) => {
            return data1.sendTime - data2.sendTime
          });

          //拼接聊天记录
          this.userList.forEach(user => {
            if (this.clientId == user.userId) {
              console.log('oldChat', oldChat.length == 0)
              user.oldMsg ? user.oldMsg : user.oldMsg = []
              user.oldMsg = oldChat
              this.newMessageList = user.oldMsg;
              console.log(this.newMessageList)
              if (user.page) {
                //查询一次页数+1
                user.page += 1
              } else {
                //在没有page这个属性时查询页数默认为第一页；所以查询完聊天记录后页数要+1；这里就从第二页开始
                user.page = 2
              }
              console.log('oldChat', oldChat.length == 0)
              user.isLookOver = this.isLookOver = true
            }
          })
          console.log(this.newMessageList, 'this.newMessageList');
        } else {
          this.newMessageList = [];
        }
        this.loadingChatList = false;
      })
    },
    jumpPageTop () {
      let ele = document.getElementById("chatInfo");
      if (ele.scrollTop) {
        let moveHeight = ele.scrollHeight;
        let timers = setInterval(() => {
          moveHeight -= moveHeight / 50
          console.log(moveHeight)
          if (moveHeight <= 4) {
            moveHeight = 0
            clearInterval(timers)
          }
          ele.scrollTop = moveHeight
        }, 1);
      }
    },
    jumpPageBottom (falg) {
      clearInterval(this.timers)
      clearInterval(this.timers1)
      this.timers1 = setTimeout(() => {
        var ele = document.getElementById("chatInfo");
        if (falg) {
          //判断元素是否出现了滚动条
          let height = ele.scrollTop;
          if (ele.scrollHeight > ele.clientHeight) {
            console.log(ele.scrollHeight)
            //设置滚动条到最底部
            this.timers = setInterval(() => {
              height += ele.scrollHeight / 50;
              if (ele.scrollHeight < height) {
                height = ele.scrollHeight
                clearInterval(this.timers)
              }
              ele.scrollTop = height;
            }, 1)
            // ele.scrollHeight
          }
        }
      }, 200);
    },
    handelVideo () {
      this.uploadType = "video";
      this.$nextTick(() => {
        this.$refs.uploadFileVideo.$children[0].$refs.input.click();
      });
    },
    handelImage () {
      this.uploadType = "image";
      this.$nextTick(() => {
        this.$refs.uploadFileImage.$children[0].$refs.input.click();
      });
    },
    async getFileId (file) {
      let fileId = null;
      let fd = new FormData();
      fd.append("file", file.raw);
      console.log(fd, 'fd')
      await fileApi.fileUpload({ fd, moduleType: 'SCIENCE_ARTICLE' }).then(res => {
        fileId = res.data.fileId;
      }).catch(err => {
        console.log('出错了', err)
      });
      return fileId;
    },
    async handleUploadSuccess (file, flag) {
      if (this.userId && flag) {
        //发送的消息对象
        let sendInfo = {
          code: 2,
          message: {
            toId: this.clientId,
            fromId: this.userId,
            messageType: flag,
            content: ''
          },
          customer: 1
        }
        let html = ''
        let fileUrl = config.webServiceUrl + '/ftp/file/download?fileId=' + await this.getFileId(file);
        if (flag == 'image') {
          html = `<img class="cartImg" src="${fileUrl}"></img>`
        } else if (flag == 'video') {
          html = `<video class="media" height="250" width="300" controls src="${fileUrl}"></video>`
        }
        if (fileUrl) {
          sendInfo.message.content = html;
          sendWSPush(sendInfo)
        } else {
          this.$message.error("发送文件失败!");
        }
      } else {
        console.log('error:没有获取到用户id');
        this.$message.error("发送文件失败!");
      }
    },
    sendMessage () {
      if (this.textarea && this.userId) {
        sendWSPush({
          code: 2,
          message: {
            toId: this.clientId,
            fromId: this.userId,
            messageType: "text",
            content: this.textarea
          },
          customer: 1
        })
        this.userList.map((item, index) => {
          if (item.userId == this.clientId) {
            this.userList.unshift(this.userList.splice(index, 1)[0]);
          }
        })
        //清空输入框
        this.textarea = ''
      };
      if (!this.userId) {
        console.log('error:没有获取到用户id');
        this.$message.error("发送消息失败!");
      }
    },
    wsConnect () {
      createSocket();
      this.getsocketData = (e) => {
        // 创建接收消息函数
        let data = e && e.detail.data;
        if (data) {
          let json = JSON.parse(data);
          console.log(json, '新消息')
          if (json && json.code && json.code == 2) {
            //用户发来的消息标记已读
            if (this.clientId === json.message.fromId) {
              this.sendReadList(json.message.id);
            };
            this.userList.forEach(userInfo => {
              //新消息 （用户发来的）
              if (userInfo.userId === json.message.fromId && this.clientId !== userInfo.userId) {
                if (!userInfo.newMsg) {
                  this.$set(userInfo, 'newMsg', [])
                };
                userInfo.newMsg.push(json.message)
              }
              //旧消息 （用户和客服的）
              if (userInfo.userId === json.message.fromId || (json.message.toId && json.message.toId === userInfo.userId)) {
                if (!userInfo.oldMsg) {
                  this.$set(userInfo, 'oldMsg', [])
                };
                userInfo.oldMsg.push(json.message)
              }
              console.log(userInfo.oldMsg, '消息列表')
              console.log(userInfo.newMsg, '新消息列表')
            })
          };
          //处理最新消息  消息列表排序  发送最新消息时 发送人排序靠前
          let nowChatUser = this.userList.filter(item => { return this.clientId == item.userId })
          let formChatUser = this.userList.filter(item => { return Number(json.message.fromId) == Number(item.userId) })
          let newChatUserList = this.userList.filter(item => { return this.clientId !== item.userId && Number(json.message.fromId) !== Number(item.userId) })
          // this.userList = formerlyChatUser.sort((userInfo1, userInfo2) => {
          //   let msgLength1 = userInfo1.msgList ? userInfo1.msgList.length : 0
          //   let msgLength2 = userInfo2.msgList ? userInfo2.msgList.length : 0
          //   let time1 = msgLength1 ? userInfo1.msgList[msgLength1 - 1].sendTime : 0;
          //   let time2 = msgLength2 ? userInfo2.msgList[msgLength2 - 1].sendTime : 0;
          //   return time2 - time1
          // })
          this.userList = newChatUserList
          console.log(nowChatUser, formChatUser)
          formChatUser.length > 0 && this.userList.unshift(formChatUser.length == 1 ? formChatUser[0] : [])
          nowChatUser.length > 0 && this.userList.unshift(nowChatUser.length == 1 ? nowChatUser[0] : [])
          if (this.clientId === json.message.fromId || (json.message.toId && json.message.toId == this.clientId)) {
            this.jumpPageBottom(true)
          }
        }
      }
      // 注册监听事件
      window.addEventListener('onmessageWS', this.getsocketData);
    },
    handleClose () {
      //想服务器发送断开连接的信息
      // let msg = { "event": 'stop_screen', "to_user": this.userId }
      // sendWSPush(msg)
      closeWs();
      this.dialogVisible = false;
      window.removeEventListener('onmessageWS', this.getsocketData);
    },
    screenSharing () {
      this.wsConnect();
    },
  }
}
</script>

<style lang="scss" scoped>
.transition-box {
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.chatWindow {
  height: 100%;
  width: 100%;
  min-width: 800px;

  .chat-left {
    width: 370px;
  }

  .chat-right {
    width: calc(100% - 375px);
  }

  .chat {
    height: 100%;
    background: #f6f6f6;
    position: relative;

    .searchUser {
      width: calc(100% - 10px);
      height: 50px;
      background: #ffffff;
      border-bottom: 1px solid #f4f4f4;
      box-sizing: border-box;
      position: absolute;
      margin-left: 5px;
      margin-top: 5px;
      padding: 10px 10px;
      top: 0;
      left: 0;
      align-items: center;
    }

    .clientUser {
      height: calc(100% - 55px);
      width: calc(100% - 10px);
      margin: 5px;
      padding-top: 50px;
      background: #f9f9f9;
      overflow-y: auto;



      .clientUserInfo {
        height: 70px;
        padding: 0 15px;
        align-items: center;
        background: #f1f1f1;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid #ffffff00;
        position: relative;

        .user {
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;

          .photo {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            text-align: center;
            line-height: 50px;
            background: #d0d0d0;
            border-radius: 4px;
            overflow: hidden;

            img {
              width: 50px;
              height: 50px;
            }
          }
        }

        .newInfo {
          text-align: right;

          .time {
            position: absolute;
            top: 10px;
            right: 10px;
          }

          .badge {
            text-align: center;
            padding: 0 5px;
            line-height: 18px;
            font-size: 12px;
            background: #f56c6c;
            border-radius: 10px;
            color: #ffffff;
            position: absolute;
            bottom: 10px;
            right: 10px;
          }
        }

        .userName {
          width: 240px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .clientUserInfo:hover {
        background: #ffffff;
      }

      .chooseUser {
        background: #ffffff;
        border: 1px solid #41a6ff;
        box-sizing: border-box;
      }
    }

    .clientUser::-webkit-scrollbar {
      display: none;
    }

    .pagination {
      width: calc(100% - 10px);
      height: calc(50px - 10px);
      margin: 5px;
      background: #ffffff;
    }

    .send {
      width: calc(100% - 10px);
      height: calc(50px - 10px);
      margin: 5px;
      background: #ffffff;
    }

    .input {
      width: calc(100% - 10px);
      height: calc(50px - 10px);
      margin: 5px;
      background: #fbfbfb;

      .modules {
        height: 40px;
        margin: 0 10px;
        border-bottom: 1px solid #f5f5f5;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: center;

        .backBtn {
          color: #aaaaaa;
        }

        .backBtn:hover {
          color: red($color: #d81717) !important;
        }


        .moduleItem {
          width: 30px;
          height: 30px;
          background: #f5f5f5;
          margin-right: 10px;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
      }



      .textarea {
        height: calc(100% - 40px);
        margin: 0 10px;
        background: #fbfbfb;
        padding-bottom: 10px;

        ::v-deep.el-input--small,
        ::v-deep textarea {
          height: 100%;
          box-sizing: border-box;
        }

        ::v-deep.el-textarea__inner:focus,
        ::v-deep.el-textarea__inner:hover {
          border-color: #DCDFE6;
        }
      }
    }

    .chatInfo {
      height: calc(100% - 55px);
      width: calc(100% - 10px);
      margin: 5px;
      background: #f1f1f1;
      overflow-x: auto;

      .showHistory {
        color: #919191 !important;
        font-size: 12px;
        line-height: 30px;
        background: #e1e1e1;
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
        margin: 10px 20px;
      }

      .noMore {
        text-align: center;
        color: #cecece;
        font-size: 12px;
        padding: 20px 0;
      }

      .showHistory:hover {
        background: #d1d1d1;
      }

      .messageItem {
        width: 100%;
        display: flex;
        justify-content: flex-start;

        .message {
          max-width: 60%;
          padding: 10px;
          justify-content: flex-start;
          align-items: flex-start;

          .infoBox {
            margin-top: 5px;

            .text {
              max-width: 100%;
              background: #ffffff;
              padding: 10px;
              margin-top: 5px;
              border-radius: 0px 6px 6px 6px;
              font-size: 12px;
              line-height: 20px;
              color: #999999;

              ::v-deep .cartImg {
                max-width: 300px;
              }

              ::v-deep img {
                max-width: 300px;
              }
            }

            .userName {
              padding: 0 5px;
            }
          }

          .info {
            margin-right: 10px;

            .photo {
              width: 40px;
              height: 40px;
              background: #cecece;
              line-height: 40px;
              text-align: center;
              border-radius: 4px;
              overflow: hidden;

              img {
                width: 50px;
                height: 50px;
              }
            }
          }
        }
      }


      .mainMessageItem {
        justify-content: flex-end;

        .info {
          margin: 0;
          margin-left: 10px;
        }

        .text {
          background: #92c9fa !important;
          color: #ffffff !important;
          border-radius: 6px 0px 6px 6px !important;
        }
      }
    }

    // .chatInfo::-webkit-scrollbar {
    //   display: none;
    // }
  }
}

::v-deep .el-select {
  width: calc(100% - 10px);
}
</style>

